<template>
  <div>
    <!-- 由于此处菜单跟左侧列表一一对应所以不需要分页 pageSize默认999 -->
    <el-table :data="tableData" row-key="ID">
      <el-table-column
        v-for="(v, i) in columns"
        :key="v.prop + i"
        :align="v.align"
        :label="v.label"
        :min-width="v.minWidth"
        :prop="v.prop"
        :fixed="v.fixed"
      >
        <template v-if="v.prop === 'authorityName'" #default="scope">
          <span>{{ scope.row.meta.title }}</span>
        </template>
        <template v-else-if="v.prop === 'authorityName2'" #default="scope">
          <div v-if="scope.row.meta.icon" class="icon-column">
            <el-icon>
              <component :is="scope.row.meta.icon" />
            </el-icon>
            <span>{{ scope.row.meta.icon }}</span>
          </div>
        </template>
        <template v-else-if="v.prop === 'hidden'" #default="scope">
          <span>{{ scope.row.hidden ? '隐藏' : '显示' }}</span>
        </template>
        <template v-else-if="v.prop === 'operation'" #default="scope">
          <el-button type="primary" link icon="plus" @click="addMenu(scope.row.ID)">
            添加子菜单
          </el-button>
          <el-button type="primary" link icon="edit" @click="editMenu(scope.row.ID)">
            编辑
          </el-button>
          <el-button type="primary" link icon="delete" @click="deleteMenu(scope.row.ID)">
            删除
          </el-button>
        </template>
        <template v-else #default="scope">
          <span>{{ scope.row[v.prop] }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
const columns = [
  { align: 'left', label: 'ID', prop: 'ID', minWidth: '100' },
  { align: 'left', label: '展示名称', prop: 'authorityName', minWidth: '100' },
  { align: 'left', label: '图标', prop: 'authorityName2', minWidth: '100' },
  { align: 'left', label: '路由Name', prop: 'name', minWidth: '100' },
  { align: 'left', label: '路由Path', prop: 'path', minWidth: '100' },
  { align: 'left', label: '是否隐藏', prop: 'hidden', minWidth: '100' },
  { align: 'left', label: '父节点', prop: 'parentId', minWidth: '100' },
  { align: 'left', label: '排序', prop: 'sort', minWidth: '100' },
  { align: 'left', label: '文件路径', prop: 'component', minWidth: '100' },
  { align: 'left', label: '操作', prop: 'operation', minWidth: '100' },
]

// const tableData = ref([])
</script>

<style></style>
